<template>
	<view class="all_body">
      <view class="baby_container">
		  <view class="baby_header">
			  <view class="" @click="aboutMe()" v-show="!isFind">
				  <text class="iconfont icon-service-directory"></text>
			  </view>
			  <view class="">
				  <text :class=" isEdit? 'iconfont icon-bianji1' : 'iconfont icon-bianji2'  " style="padding-right: 30rpx;" v-show="!isFind" @click="baby_edit()"></text>
				  <text class="iconfont icon-sousuo1" @click="findByText()"></text>
			  </view>
			  
		  </view>
		  
		  
		  <view class="baby_img">
			  <view class="  baby_img_item  "     v-for="(item,index) in imgdata" :key="item.text" @click="enterDetail(index)" >
				  <image :src="item.src" class="isEditBaby"></image>
				  <text>{{item.text}}</text>
			  </view>  
		  </view>	
						
	  </view>
		
		
		<view class="baby_main" :class=" isShow?'ISSHowItem':''" >
			<view class="iconfont icon-guanbi leave" @click="returnMe()"></view>
			<view class="baby_face">
				<image src="../../static/image/cat.jpeg" mode=""></image>
			</view>
			<view class="baby_name">{{username}}</view>
			
			<view class="bady_item">
			   <view class="bady_mime_item" @click="toBabyRoom()">
				   <view class="iconfont icon-pengyou littleimg"></view>
				   <view class="bady_item_input">我的发布</view>
			   </view>
			   
			   <view class="bady_mime_item"  >
			   				   <view class="iconfont icon-bokeyuan littleimg"></view>
			   				   <view class="bady_item_input">我的博客</view>
			   </view>
			   
			   <view class="bady_mime_item"  @click="tobabyFriend()">
			   				   <view class="iconfont icon-taidixiongwanoukeai littleimg"></view>
			   				   <view class="bady_item_input">我的小可爱</view>
			   </view>
			   
			   <view class="bady_mime_item" style="position: relative;" @click="friendRequest()">
			   				   <view class="iconfont icon-tongzhi littleimg"></view>
			   				   <view class="bady_item_input">通知</view>
							   <view class="miniDotter" v-if="!friendInfo.length==0">{{friendInfo.length}}</view>
			   </view>
			   
			   <view class="bady_mime_item" >
			   				   <view class="iconfont icon-shezhi littleimg"></view>
			   				   <view class="bady_item_input">设置</view>
			   </view>
			   
			   <view class="bady_mime_item" @click="returnLogin()">
			   				   <view class="iconfont icon-guanji littleimg"></view>
			   				   <view class="bady_item_input">退出登录</view>
			   </view>
			   
			   
			</view>
			
			
			
			
			
		</view>		
		
		
		<view class="findInput" v-if="isFind">
			<input type="text" value="" v-model="textValue" placeholder="请输入想要搜索的日记关键字" />
			<view class="iconfont icon-guanbi " @click="closeInput()" style="width: 50rpx;height: 50rpx;text-align: center;"></view>
		</view>
		
		
		
			
	</view>
</template>

<script>
	
	export default {
		data(){
			return {
				imgdata:[{src:"../../static/image/foot.jpeg",text:"美食"},{src:"../../static/image/car.jpeg",text:"汽车"},{src:"../../static/image/fashion.jpeg",text:"时尚"},
				{src:"../../static/image/trip.jpeg",text:"旅行"},{src:"../../static/image/techno.jpeg",text:"科技"}],
				isShow:true,
				username:'',
				longitude:0,
				latitude:0,
				isFind:false,
				textValue:'',
				currentIndex:0,
				isEdit:false,
				//双击事件
				index: 0,  
				start_time: 0,  
				end_time: 0,
				//朋友通知
				friendInfo:[],
				//是否显示红点点
				isShowDott:false
				
				
				
				
				
			}
		},
		methods:{
			aboutMe(){
				this.isShow = false	
			},
			returnMe(){
				this.isShow = true
			},
		
			returnLogin(){
				uni.navigateTo({
					url:"../login/login"
				})
			},
			enterDetail(index){
				this.currentIndex = index
			  if(this.username.trim().length!=0&&this.isEdit==false){
				  uni.navigateTo({
				  	url:`../fashion/fashion?data=${index}`
				  })
				  this.isShow = true
			  }else{
				  uni.showToast({
				  	title:'请先登录或者退出编辑模式',
					icon:"none"
				  })
			  }
			  
			// ----------------------------------
			  this.index = this.index == 0 ? 1 : this.index + 1;  
			            if (this.index == 1) {  
			                this.start_time = new Date().getTime();  
			                setTimeout(()=>{  
			                    this.index = this.start_time = this.end_time = 0;  
			                },200)  
			            } else if (this.index == 2) {  
			                this.end_time = new Date().getTime();  
			                if (this.end_time - this.start_time < 300) {  
			                    uni.showToast({  
			                        title: '双击了屏幕',  
			                        icon: 'none'  
			                    })  
			                }  
			                this.index = this.start_time = this.end_time = 0; 
			  
			  }
			  
			},
			toBabyRoom(){
				if(this.username.trim().length!=0){
								  uni.navigateTo({
								  	url:"../noteDetail/notedetail"
								  })
								  this.isShow = true
				}else{
								  uni.showToast({
								  	title:'请先登录',
									icon:"none"
								  })
				}
				
			},
			findByText(){
				this.isFind = true
				let that = this
			    if(this.textValue.trim().length!==0){
					let parmas = {text:this.textValue}
					uni.request({
						url:"http://localhost:4008/bady/findBabynoteByText",
						method:"POST",
						data:parmas,
						success(res){
							console.log(res)
							let findData = res.data.data
							console.log(findData)
							uni.setStorage({
								key:"findData",
								data:findData
							})
							uni.navigateTo({
								url:`../fashion/fashion`
							})
								
						
						}
					})
					
				}
				
				
				
				
				
				
			},
			closeInput(){
				console.log(111)
				this.isFind = false
				this.textValue = ''
			},
			tobabyFriend(){
				uni.navigateTo({
					url:"../friend/babyfriend"
				})
			},
			baby_edit(){
				this.isEdit = !this.isEdit
			},
			// 读取是否有好友添加信息
			
			readaddFriend(){
				let that = this
				uni.request({
					url:"http://localhost:4008/friendInfomation.json",
					method:"GET",
					success(res) {
						console.log(res)
						// that.friendInfo = res.data
						res.data.forEach(item=>{
							console.log(item)
							if(that.username==item.friednname&&item.isRead=='false'){
								that.friendInfo.push(item)
							}
							
							
							
						})
					}
				})
			},
			friendRequest(){
				console.log(222222222222)
				uni.navigateTo({
					url:`../friend/Requestfriend?data=`+JSON.stringify(this.friendInfo)
				})
			}
			
		},
		computed:{
			
		},
		onLoad() {
			let that = this
			uni.getStorage({
				key:"user",
				success(res){
					console.log(res.data[0].us)
					that.username = res.data[0].us
				}
			})
			
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
					that.longitude = res.longitude
					that.latitude = res.latitude
					uni.setStorage({
						key:"location",
						data:{
							longitude:that.longitude,
							latitude:that.latitude
						}
					})
			    },
			});
			// 读取朋友添加信息
			that.readaddFriend()
			
			
			
			
		},
		
		
	}
	
	
	
	
</script>

<style lang="less">
	.baby_container{
		width: 90%;
		height: 100%;
		// background: pink;
		margin: auto;
		.baby_header{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}
		.baby_img{
			width: 100%;
			height: 100%;
		
			.baby_img_item{
	           margin-bottom: 50rpx;
			   box-shadow: 0rpx 1rpx 0rpx 0rpx #ccc;
			   position: relative;
	           animation: scalepic 2s ;
			   
			   
			  
		
				image{
					width: 100%;
					height: 250rpx;
					border-radius:5%;
					
				}
				text{
					position: absolute;
					z-index: 10;
					left: 50%;
					top: 50%;
					color: white;
				}
			}
		}
	}
	
	
	.baby_main{
		width: 60%;
		height: 100%;
		background: white;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		animation: transformtext 0.1s;
        .leave{
			width: 50rpx;
			height: 50rpx;
			margin: 10rpx 10rpx 10rpx 10rpx;
			animation: scalepic 0.5s;
		}	
		.baby_face{
			width: 100%;
			height: 260rpx;
			// background: yellow;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: scalepic 1s ;
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
			
		}	
		.baby_name{
			margin: auto;
			text-align: center;
			animation: opacities 1s;
			
		}
		.bady_item{
			width: 100%;
			height: 100%;
			// background: yellow;
			margin-top: 50rpx;
			// transform: translateX(-500rpx);
			animation: transformtext 1s;
	
			.bady_mime_item{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				font-family: "楷体";
			}
			.littleimg{
				flex: 1;
				padding-left: 30rpx;
			}
			.bady_item_input{
				flex: 6;
			}
		}
	}
	
	.ISSHowItem{
		display: none;
	}
	
	@keyframes scalepic{
	    0%{
	        transform: scale(0);
	    }
	    100%{
	        transform: scale(1);
	    }
	}
	
	@keyframes transformtext {
		0%{
			transform: translateX(-100vw);

		}
		100%{
			transform: translateX(0);

		}
	}
	@keyframes opacities {
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	
.findInput{
	width: 80%;
	height: 100rpx;
	// background: pink;
    display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 15%;
	z-index: 100;

	input{
		width: 100%;
		border-bottom: 1rpx solid #ccc;
		font-family: "楷体";
		font-size: 32rpx;
	}
	
}


.isEditBaby{
	// border-radius:5% ;
	// border: 10rpx solid pink ;
    animation: editScale 1s infinite ;
}
.miniDotter{
	width: 30rpx;
	height: 30rpx;
	background: red;
	position: absolute;
	border-radius: 100%;
	text-align: center;
	color: #fff;
	
	top: 35%;
	left: 85% ;
	
}






.icon-bianji1{
	color: red !important;
}
	
	
	
	
	
	
	
</style>
